<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-screen">
				<u-image src="@/static/plogo.png" width="100" height="100"></u-image>
				<view class="mt-60" style="font-size: 20px; font-weight: bold;">万善桥评理堂</view>
				<view class="mt-30" style="font-size: 14px; color:#555;">听民说事 · 请民议事 ·为民办事</view>
				<view class="mt-30" style="display: flex;justify-content: center;">
					<u-button color="#610A93"
						:customStyle="{width:'120px',margin:'0 10px'}" text="纠纷申报"
						@click="navTo('/pages/dispute/post')"></u-button>
				</view>
			</view>
			<!--智能分流路径-->
			<view class="section p-30">
				<view class="page-title">{{info.intelligent_routing.title}}</view>
				<view class="p-30">
					<view class="p-30 mb-30" style="border:1rpx solid #eee;border-radius: 15px;"
						v-for="item in info.intelligent_routing.routes">
						<view style="font-size: 15px; font-weight: bold;">{{item.name}}</view>
						<view class="mt-20" style="font-size: 13px;color:#999;">{{item.description}}</view>
					</view>
				</view>
			</view>
			<!--纠纷解决流程-->
			<view class="section p-30 mt-30">
				<view class="page-title">{{info.dispute_resolution_process.title}}</view>
				<view class="p-30">
					<view class="mt-30" style="display: flex;"
						v-for="(item,index) in info.dispute_resolution_process.steps">
						<view class="step-no">{{index+1}}</view>
						<view style="flex-grow: 1;" class="pl-20">
							<view style="font-size: 15px; font-weight: bold;">{{item.name}}</view>
							<view class="mt-20" style="font-size: 13px;color:#999;">{{item.description}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section py-50 px-30 mt-30" style="	background: #610A93;color:white;">
				<view style="font-size: 20px; font-weight: bold;" class="text-center">万善桥评理堂</view>
				<view class="mt-30" style="font-size: 14px; color:white;">我们期待您的参与，共同建设美好和谐社区。无论您有什么问题、建议或需要帮助，都可以联系我们。
				</view>
				<view class="mt-30 lianxi-list">
					<view class="lianxi-item">
						<view class="icon"><text class="ri-map-pin-line"></text></view>
						<view class="mt-20" style="font-size: 14px; font-weight: bold;">地址</view>
						<view class="mt-20" style="font-size: 12px; ">榆林市榆阳区万善桥社区评理堂服务中心</view>
					</view>
					<view  class="lianxi-item">
						<view class="icon"><text class="ri-phone-line"></text></view>
						<view class="mt-20" style="font-size: 14px; font-weight: bold;">联系电话</view>
						<view class="mt-20" style="font-size: 12px; ">0912-xxxxXXXX
							工作时间:周一至周五 9:00-17:30</view>
					</view>
				</view>

			</view>
			<view style="height:30rpx"></view>
		</view>
	</view>
</template>

<script>
	import {
		getDispute
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: true,
				info: [],
				banner: [],
			}
		},
		onLoad() {
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function(){
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getDispute().then(res => {
					this.info = res.layout;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.step-no {
		background-color: skyblue;
		color: white;
		width: 40px;
		height: 40px;
		border-radius: 40px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: bold;
	}

	.page-title {
		font-weight: bold;
		color: var(--m-color);
	}



	.first-screen {
		height: calc(100vh - var(--window-bottom));
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	
	.section{
		width: calc(100% - 60rpx);
		margin:0 auto;
		background-color: white;
		border-radius: 10px;
	}
	.lianxi-list{
		display: flex;justify-content: center;margin-left: -10px;margin-right: -10px;
		flex-wrap: wrap;
	}
	.lianxi-item{
		width:calc(100% - 20px);
		margin:10px;
		border-radius: 5px;
		background-color: rgba(255,255,255,0.3);
		padding:15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.icon{
			width: 40px;
			height:40px;
			border-radius: 40px;
			background-color: rgba(255,255,255,0.2);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>